<template>
  <div>
    <div class="bigdiv" v-for="item in list" :key="item.id">
      <h4>{{item.title}}</h4>
      <span class="addtime">发表时间:{{item.add_time}}</span>
      <span class="clicknum">点击数:{{item.click}}</span>
      <hr />
      <ul>
        <li v-for="(item,index) in listimage" :key="item.id">
          <img :src="item.src" @click="getImg(index)" alt />
        </li>
      </ul>
      <p class="content" v-html="item.content"></p>
      <h3>发表评论:</h3>
      <hr />
      <van-cell-group>
        <van-field v-model="value" rows="1" border autosize type="textarea" placeholder="请输入留言" />
      </van-cell-group>
      <van-button type="info" size="large" class="comment">发表评论</van-button>
      <van-button color="#ee0a24" plain size="large">加载更多</van-button>
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import { ImagePreview } from 'vant'
Vue.use(ImagePreview)
export default {
  data() {
    return {
      id: '',
      h4: '',
      list: [],
      value: '',
      listimage: [],
      imgPath: []
    }
  },
  created() {
    this.getDetail()
    this.getImage(this.id)
  },
  methods: {
    async getDetail() {
      const p = window.location.href
      this.id = p.substr(46, 2)
      // console.log(this.id)
      const { data: res } = await this.$http.get(`/api/getimageInfo/${this.id}`)
      console.log(res.message[0].click)
      this.list = res.message
      //   console.log(this.list)
      //   const num = res.message[0].click + 1
      //   console.log(num)
    },
    async getImage(id) {
      // console.log(id)
      const { data: res } = await this.$http.get('/api/getthumimages/' + id)
      console.log(res)
      this.listimage = res.message
      console.log(this.listimage)
    },
    getImg(index) {
      // console.log(this.listimage)
      this.listimage.forEach(item => {
        this.imgPath.push(item.src)
      })
      ImagePreview({
        images: this.imgPath,
        startPosition: index
      })
      this.imgPath = []
    }
  }
}
</script>
<style scoped>
.bigdiv {
  margin: 0 5px;
  height: 780px;
}
h4 {
  color: #26a2ff;
  font-size: 15px;
  text-align: center;
}
.addtime {
  float: left;
  color: #8f8f94;
  font-size: 13px;
}
.clicknum {
  float: right;
  color: #8f8f94;
  font-size: 13px;
  margin-bottom: 20px;
}
hr {
  margin-top: 10px;
  width: 95%;
}
.content {
  font-size: 16px;
}
h3 {
  font-weight: bold;
}
.van-cell {
  border: 1px solid #ccc;
  height: 100px;
  padding: 10px 15px;
}
.comment {
  margin: 5px auto;
}
ul {
  list-style: none;
  margin: 10px 0;
  padding: 0 5px;
  overflow: hidden;
}
ul li {
  float: left;
  width: 33.3333%;
  padding: 5px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
img {
  width: 100%;
  box-shadow: 1px 0 8px 1px rgba(0, 0, 0, 0.3);
}
</style>
